<!--单计量下拉-->
<template>
    <div class="unit-search-wrapper">
        <a-select defaultActiveFirstOption :disabled="!incomingData.onEdit" showSearch option-label-prop="value" v-model="incomingData.valueName" @change="handleChange" :placeholder="`请选择${incomingData.name}`" :prop="incomingData.code" :rules="[{ required: true, message: `${incomingData.name}不能为空`,trigger:'change' }]">
            <a-select-opt-group>
                <span slot="label">
                    <a-row class="name">
                        <a-col :span="12">编码</a-col>
                        <a-col :span="12" class="padding-left-5">名称</a-col>
                    </a-row>
                </span>
                <a-select-option v-for="item in data" :data="item" :key="item.code + item.name">
                    <a-row class="content">
                        <a-col :span="12">{{item.code}}</a-col>
                        <a-col :span="12">{{item.name}}</a-col>
                    </a-row>
                </a-select-option>
            </a-select-opt-group>
        </a-select>

    </div>
</template>
<script>
import { pageList } from '@/api/inventory/unit'
export default {
    props: {
        incomingData: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {
            data: [],
            postData: {
                //查询条件
                current: 1,
                size: 100,
                unitGroupId: 0,
            },
            selectedData: [],
        }
    },
    activated() {
        this.getList()
    },
    created() {
        this.getList()
    },
    methods: {
        handleChange(e, option) {
            console.log(option)
            let selectedData = option.data.attrs.data
            this.$set(selectedData, 'val', {
                id: selectedData.id,
                name: selectedData.name,
            })
            this.$set(selectedData, 'propertyName', 'unitId')
            this.$emit('okUnit', selectedData)
        },
        getList(id) {
            //获取计量列表
            const { postData } = this
            pageList(postData)
                .then((response) => {
                    if (response.code === 200) {
                        const { data } = response
                        const { records, total, current, size } = data
                        this.data = records
                        if (id) {
                            for (let i = 0; i < this.data.length; i++) {
                                if (this.data[i].id == id) {
                                    this.$set(this.data[i], 'val', {
                                        id: this.data[i].id,
                                        name: this.data[i].name,
                                    })
                                    this.$set(
                                        this.data[i],
                                        'propertyName',
                                        'unitId'
                                    )
                                    this.$emit('okUnit', this.data[i])
                                }
                            }
                        }
                    }
                })
                .catch((error) => {})
        },
    },
}
</script>
<style lang="less" scoped>
    .name {
        font-size: 16px;
    }

    .unit-search-wrapper {
        position: relative;
        width: 100%;
        height: 40px;

        .table-wrapper {
            position: absolute;
            top: 40px;
            left: 0;
            width: 190px;
            box-shadow: 1px 2px 5px #ccc;
            background: #fff;
            z-index: 9999;
        }
        .table-btn {
            text-align: center;
        }
    }
</style>